<template>
  <div class="overview-chart">
    <div class="overview-chart__header">
      <span class="text-[14px] text-[#333] font-semibold">快捷选择</span>
      <div class="overview-option">
        <div
          v-for="item in typeList"
          :key="item.key"
          :class="item.key === targetOption ? 'active' : ''"
          @click="handleClick(item.key)"
        >
          {{ item.label }}
        </div>
      </div>
      <span class="text-[14px] text-[#333] font-semibold">自定义日期</span>
      <div>
        <el-date-picker
          v-model="customTime"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="X"
          class="w-[261px] ml-[7px]"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="() => handleDateChange()"
        />
      </div>
    </div>
    <div class="overview-chart__body">
      <div ref="requestChart" class="mt-6 charts-main"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { getUnixZero, getChartData } from '@/utils'
import chartOptions from './options'
import type { ChartData } from '@/apis/model/statistics'
import dayjs from 'dayjs'
import useChart from '@/hooks/useChart'
const formData = {
  begin_at: getUnixZero(dayjs().subtract(6, 'days') as unknown as number), //getUnixZero(getUnix())
  end_at: getUnixZero() + 86399 //getUnixZero(getUnix()) + 86399
}
const typeList: { label: string; key: string }[] = [
  { label: '7天', key: 'week' },
  { label: '15天', key: 'halfMonth' },
  { label: '30天', key: 'month' }
]
/** 时间变化 */
const handleDateChange = () => {
  targetOption.value = ''
  formData.begin_at = Number(customTime.value[0])
  formData.end_at = Number(customTime.value[1]) + 86399
  getRequestsData()
}

interface IState {
  overview: ModuleData
}

const state = reactive<IState>({
  overview: { loading: false, dataSource: [] }
})
type ModuleData = { loading: boolean; dataSource: ChartData[] }

const targetOption = ref('week')
const customTime = ref('')
const handleClick = (val: string) => {
  targetOption.value = val
  // const unixZero = getUnixZero()
  const valueMap = {
    // today: {
    //   startTime: unixZero,
    //   endTime: unixZero + 86399
    // },
    // yesterday: {
    //   startTime: getUnixZero(dayjs().subtract(1, 'days') as unknown as number),
    //   endTime:
    //     getUnixZero(dayjs().subtract(1, 'days') as unknown as number) + 86399
    // },
    week: {
      startTime: getUnixZero(dayjs().subtract(6, 'days') as unknown as number),
      endTime: getUnixZero() + 86399
    },
    halfMonth: {
      startTime: getUnixZero(dayjs().subtract(14, 'days') as unknown as number),
      endTime: getUnixZero() + 86399
    },
    month: {
      startTime: getUnixZero(dayjs().subtract(29, 'days') as unknown as number),
      endTime: getUnixZero() + 86399
    }
  }
  // @ts-ignore
  const { startTime, endTime } = valueMap[targetOption.value]
  // @ts-ignore
  customTime.value = [startTime, endTime]
  formData.begin_at = startTime
  formData.end_at = endTime
  //getInitData()
  getRequestsData()
}
/** 初始化 请求数 图表 */
const requestChart = ref<HTMLDivElement>()
const initEcharts = () => {
  const { xAxisData, seriesData, unit } = getChartData(
    state.overview.dataSource,
    formData.begin_at,
    formData.end_at,
    'node_increase_num'
  )
  const tcc_install = getChartData(
    state.overview.dataSource,
    formData.begin_at,
    formData.end_at,
    'tcc_install_num'
  )
  const pack_build = getChartData(
    state.overview.dataSource,
    formData.begin_at,
    formData.end_at,
    'pack_task_num'
  )

  useChart(
    requestChart,
    chartOptions.overview(
      xAxisData,
      [seriesData, tcc_install.seriesData, pack_build.seriesData],
      unit
    )
  )
}
/** 获取概览图表 */
const getRequestsData = () => {
  state.overview.loading = true
  OverviewStatistics(formData)
    .then((res: any) => {
      state.overview.dataSource = res?.list ?? []
      initEcharts()
    })
    .finally(() => {
      state.overview.loading = false
    })
}

watchEffect(() => {
  getRequestsData()
})
</script>

<style scoped lang="scss">
.overview-chart {
  @apply flex flex-col rounded-md bg-white;
  height: 423px;
  &__header {
    @apply flex items-center whitespace-nowrap;
    .overview-option {
      margin: 0 42px 0 11px;
      display: flex;
      justify-content: flex-start;
      font-size: 12px;
      div {
        min-width: 49px;
        height: 26px;
        line-height: 1;
        padding: 7px 15px;
        color: #333;
        border-radius: 2px;
        cursor: pointer;
        border: 1px solid #bfbfbf;
      }
      div:nth-child(2) {
        margin: 0 16px;
      }
      .active {
        border-color: #4878ff;
        color: #4878ff;
      }
    }
  }

  &__body {
    .charts-main {
      height: 380px;
    }
    .overview-chart__chart {
      :deep(.el-tabs__header) {
        display: none;
      }
    }
  }

  &__footer {
    @apply flex gap-x-[50px] text-sm font-normal;
  }
}
</style>
